import React, { useEffect, useState } from "react";
import {
    Form,
    Input,
    Select,
} from 'antd'
import { useCurrentNode } from "@/hooks/useCurrentNode";
import { useNodesData, useReactFlow } from "@xyflow/react";
import { getFlowTables } from "@/api";
import { useModelStore } from "@/store/MetaModel";

const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 6,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 14,
        },
    },
};
export const DataSourceForm = () => {
    const [form] = Form.useForm();
    const [tableOptions, setTableOptions] = useState([])
    const [tableLoading, setTableLoading] = useState(false)
    const currentNode = useCurrentNode()
    const nodeData = useNodesData(currentNode?.id)

    const { updateNodeData } = useReactFlow()
    const { idSpace, vluTabSource } = useModelStore()
    useEffect(() => {
        form.setFieldsValue({
            tableName: nodeData?.data?.tableName,
            filter: nodeData?.data?.filter
        })
    }, [nodeData])

    const fetchTables = () => {
        setTableLoading(true)
        getFlowTables({
            idSpace,
            vluTabSource
        }).then(res => {
            const opts = res?.data?.map(item => ({
                label: item.title,
                value: item.title
            })) ?? []
            setTableOptions(opts)
        }).finally(() => {
            setTableLoading(false)
        })
    }

    useEffect(() => {
        fetchTables()
    }, [])

    const handleValuesChange = (value) => {
        updateNodeData(currentNode?.id, { ...value, columns: [], allColumns: []})
    }

    return (
        <Form
            {...formItemLayout}
            form={form}
            // variant={'filled'}
            // layout='horizontal'
            style={{
                height: '100%',
                width: '100%',
                overflow: 'auto'
            }}
            onValuesChange={handleValuesChange}
        >
            <Form.Item
                label="选择数据表"
                name="tableName"
                rules={[
                    {
                        required: true,
                        message: '请选择数据表!',
                    },
                ]}
            >
                <Select
                    placeholder="请选择数据表"
                    loading={tableLoading}
                    options={tableOptions}
                    allowClear
                    showSearch
                />
            </Form.Item>

            <Form.Item
                label="输入过滤"
                name="filter"
                rules={[
                    {
                        required: false,
                        async validator() {
                            return Promise.resolve()
                        }
                    },
                ]}
            >
                <Input.TextArea placeholder="填写每次运行输入数据的筛选条件，支持带参数，如ds=${bizdate}" rows={5} />
            </Form.Item>
        </Form>
    );
};